<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body,
		html,
		#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}

		.anchorBL {
			display: none;
		}
	</style>
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/style.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="js/data.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ysssI8lBYFUhdurmm315YaXM6pF0VMHx"></script>
	<title>绵阳市河长制信息化管理系统</title>
</head>

<body>
	<header class="header">
		<img src="./img/ic_logo.png" class="logo" />
		<span class="title">绵阳市河长制信息化管理系统</span>
		<div class="right clearfix">
			<img src="./img/ic_alarm.png" class="alarm" />
			<span class="username">shueynn</span>
			<span class="btn-logout">
				退出
			</span>
		</div>
	</header>

	<div id="main" class="main">
		<div class="search">
			<input type="text" autocomplete autofocus placeholder="请输入关键词查询" class="search-input"><i class="icon-clear"></i>
			<span class="btn">
				<img src="./img/ic_search.png" alt="搜索图标" class="search-icon">
			</span>
		</div>

		<div class="select-type1">
			<label for="">区域</label>
			<select class="type1-select">
					<option selected value="全部">全部</option>
					<option value="涪城区">涪城区</option>
					<option value="游仙区">游仙区</option>
					<option value="安州区">安州区</option>
					<option value="三台县">三台县</option>
					<option value="盐亭县">盐亭县</option>
					<option value="梓潼县">梓潼县</option>
					<option value="北川羌族自治县">北川羌族自治县</option>
					<option value="平武县">平武县</option>
					<option value="江油市">江油市</option>
				</select>
		</div>
		<!-- Unnamed (下拉列表框) -->
		<div class="select-type2">
			<label for="">类型</label>
			<select onchange="typeChange(this)" class="type2-select">
					<option selected value="全部">全部</option>
					<option value="河长信息">河长信息</option>
					<option value="水质监测站">水质监测站</option>
					<option value="污染源">污染源</option>
					<option value="污水处理厂">污水处理厂</option>
				</select>
		</div>




	</div>
	<div id="allmap"></div>

	<div id="type1" class="info type1">
		<span class="close-btn" onclick="hideDialog('#type1')">&times;</span>
		<div class="title type1__name">曾家渡段</div>
		<div class="maprow type1__row1">河长:<span class="type1__user-name">王五</span> | <span>联系电话:<span class="type1__user-phone">13790113831</span></span>
		</div>
		<div class="maprow">河段长度: <span class="type1__row2">4.5KM</span></div>
		<div class="maprow"> <span class="detail">巡航轨迹(17条)</span> <span class="detail">相关事件(2条)</span></div>
		<div class="maprow maplink detail">查看详情</div>
	</div>


	<div id="type2" class="info type2">
		<span class="close-btn" onclick="hideDialog('#type2')">&times;</span>
		<div class="title type2__name">绵阳市游仙区欧冠服饰有限公司</div>
		<div class="maprow type2__row1">监管级别:<span class="type2__user-name mapval">国控</span> | <span>组织机构代码:<span class="type2__user-phone mapval">13790113831</span></span>
		</div>
		<div class="maprow type2__row2">法人代表: <span class="mapval">4.5KM</span> | 联系电话:<span>13790118888</span></div>
		<div class="maprow type2__row3"> <span>详细地址:</span> <span>地址</span></div>
		<div  class="mapval maplink detail">查看详情</div>
	</div>

	<div id="type3" class="info type3">
		<span class="close-btn" onclick="hideDialog('#type3')">&times;</span>
		<div class="maprow title type3__name">绵阳市游仙区欧冠服饰有限公司</div>
		<div class="maprow type3__row1">水质等级:<span class="type3__user-name mapval">国控</span> | <span>更新日期:<span class="type3__user-phone mapval">13790113831</span></span>
		</div>
		<div class="maprow type3__row2">负责人: <span>王思</span> | 联系电话:<span>13790118888</span></div>
		<div class="maprow type3__row3"> <span>超标项:</span> <span class="item_expensive"><i>cod</i> <i> 氨氮</i></span></div>
		<div  class="maprow detail">查看详情</div>
	</div>

	<div id="type4" class="info type4">
		<span class="close-btn" onclick="hideDialog('#type4')">&times;</span>
		<div class="title type4__name">绵阳市游仙区欧冠服饰有限公司</div>
		<div class="maprow type4__row1">监管级别:<span class="type4__user-name mapval">国控</span> | <span>组织机构代码:<span class="type4__user-phone mapval">67883110-7</span></span>
		</div>
		<div class="maprow type4__row2">负责人: <span>王思</span> | 联系电话:<span class="mapval maplink">13790118888</span></div>
		<div class="maprow type4__row3"> <span>详细地址:</span> <span>绵阳市游仙区桑林街东原长洲四号</span></div>
		<div class="maprow type4__row4"> <span>进水口:</span> <span class="mapval maplink">COD(mg/L) 120/PH 5.3/瞬时流量(m3/h) 30</span></div>
		<div class="maprow type4__row4"> <span>出水口:</span> <span  class="mapval maplink">COD(mg/L) 62/PH 7.2/瞬时流量(m3/h) 29</span></div>
		<div  class="mapval maplink  detail">查看详情</div>
	</div>

</body>

</html>
<script type="text/javascript">
	var lastPolygon = null;
	// 百度地图API功能
	var map = new BMap.Map("allmap"); // 创建Map实例	
	var centerPoint = new BMap.Point(104.705519, 31.504701);
	map.centerAndZoom(centerPoint, 12); // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl()); //添加地图类型控件	
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

	var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件

	map.addControl(top_left_navigation);

	//添加河长信息标注点
	for (var i = 0; i < Data.HeZhangInfos.length; i++) {
		var marker = new BMap.Marker(new BMap.Point(Data.HeZhangInfos[i].x, Data.HeZhangInfos[i].y)); // 创建标注
		marker.customData = {
			type: "河长信息"
		};
		//var title = data_info[i][2];
		map.addOverlay(marker); // 将标注添加到地图中
		//		var label = new BMap.Label(title, {
		//			offset: new BMap.Size(20, -10)
		//		});
		//marker.setLabel(label);
		//addClickHandler(title, marker);

		if (Data.HeZhangInfos[i].vertices) {
			addMouseOverHandler(Data.HeZhangInfos[i].vertices, marker);
		}
	}

	//定义水质监测站Icon
	var stationIcon = new BMap.Icon("img/icon-3类.png",
		new BMap.Size(37, 46), {
			anchor: new BMap.Size(18.5, 46)
		});
	//添加水质监测站
	for (var i = 0; i < Data.Stations.length; i++) {
		var marker = new BMap.Marker(new BMap.Point(Data.Stations[i].x, Data.Stations[i].y), {
			icon: stationIcon
		}); // 创建标注
		marker.customData = {
			type: "水质监测站"
		};
		//var title = data_info[i][2];
		map.addOverlay(marker); // 将标注添加到地图中
		//		var label = new BMap.Label(title, {
		//			offset: new BMap.Size(20, -10)
		//		});
		//marker.setLabel(label);
		//addClickHandler(title, marker);
	}

	//定义污染源Icon
	var pollutionIcon = new BMap.Icon("img/icon-污水.png",
		new BMap.Size(43, 51), {
			anchor: new BMap.Size(21.5, 51)
		});
	//添加污染源
	for (var i = 0; i < Data.Pollutions.length; i++) {
		var marker = new BMap.Marker(new BMap.Point(Data.Pollutions[i].x, Data.Pollutions[i].y), {
			icon: pollutionIcon
		}); // 创建标注
		marker.customData = {
			type: "污染源"
		};
		//var title = data_info[i][2];
		map.addOverlay(marker); // 将标注添加到地图中
		//		var label = new BMap.Label(title, {
		//			offset: new BMap.Size(20, -10)
		//		});
		//marker.setLabel(label);
		//addClickHandler(title, marker);
	}

	//定义污水处理厂Icon
	var plantIcon = new BMap.Icon("img/icon-厂.png",
		new BMap.Size(43, 51), {
			anchor: new BMap.Size(21.5, 51) //,
			//imageOffset: new BMap.Size(0, 0)
		});
	//添加污水处理厂
	for (var i = 0; i < Data.WastewaterPlants.length; i++) {
		var marker = new BMap.Marker(new BMap.Point(Data.WastewaterPlants[i].x, Data.WastewaterPlants[i].y), {
			icon: plantIcon
		}); // 创建标注
		marker.customData = {
			type: "污水处理厂"
		};
		//var title = data_info[i][2];
		map.addOverlay(marker); // 将标注添加到地图中
		//		var label = new BMap.Label(title, {
		//			offset: new BMap.Size(20, -10)
		//		});
		//marker.setLabel(label);
		//addClickHandler(title, marker);
	}

	function addClickHandler(title, marker) {
		marker.addEventListener("click", function (e) {
			openInfo(title, e)
		});
	}

	function addMouseOverHandler(vertices, marker) {
		marker.addEventListener("mouseover", function (e) {
			drawPolygon(vertices);
		});

		marker.addEventListener("mouseout", function (e) {
			if (lastPolygon) {
				removePolygon(lastPolygon);
			}
		});
	}

	function openInfo(title, e) {
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

		var sTemplate = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>{title}</h4>" +
			"<img style='float:right;margin:4px' id='imgDemo' src='img/{title}.jpg' width='323' height='101' title='{title}'/>";
		var realContent = sTemplate.replace(/{title}/g, title);
		var infoWindow = new BMap.InfoWindow(realContent); // 创建信息窗口对象 
		map.openInfoWindow(infoWindow, point); //开启信息窗口

		//图片加载完毕重绘infowindow
		document.getElementById('imgDemo').onload = function () {
			infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
		}
	}

	//绘制多边形
	function drawPolygon(vertices) {
		if (vertices) {
			var boudary = [];
			for (var i = 0; i < vertices.length; i++) {
				boudary.push(new BMap.Point(vertices[i][0], vertices[i][1]));
			}

			lastPolygon = new BMap.Polygon(boudary, {
				strokeColor: "yellow",
				strokeWeight: 2,
				strokeOpacity: 0.5,
				fillColor: "yellow",
				fillOpacity: 0.5
			});

			map.addOverlay(lastPolygon); //增加多边形
		}
	}

	function removePolygon(polygon) {
		if (polygon) {
			map.removeOverlay(polygon);
		}
	}

	function typeChange(type) {
		showCertainMarker(type.value);
	}

	function showCertainMarker(type) {

		var allOverlays = map.getOverlays();
		var allMarkers = [];

		for (var i = 0; i < allOverlays.length; i++) {
			if (allOverlays[i] instanceof BMap.Marker) {
				allMarkers.push(allOverlays[i]);
			}
		}

		if (type == "全部") {
			for (var i = 0; i < allOverlays.length; i++) {
				if (!allOverlays[i].isVisible()) {
					allOverlays[i].show();
				}
			}

		} else {
			for (var i = 0; i < allMarkers.length; i++) {
				if (allMarkers[i].customData.type == type) {
					allMarkers[i].show();
				} else {
					allMarkers[i].hide();
				}

			}

		}

	}
</script>